<template>
  <div id="getGoodsType">
    <group class="goods_box">
      <checker v-model="selected_id" radio-required  default-item-class="goods-item" selected-item-class="goods-item-selected">
        <checker-item v-for="goods in goodsList" :key="goods.id" :value="goods.id">
          <h3>{{goods.sumcard}}张房卡</h3>
          <p>{{goods.money}}元</p>
          <p v-if="goods.emoticon" class="red">{{goods.emoticon}}</p>
        </checker-item>
      </checker>
      <div class="goods_dec" v-if="goodsDecList[selected_id]">
        <!-- 格式html标签字符串 -->
        <!-- 黑色字体<span>红色字体</span>-->
        <p v-html="goodsDecList[selected_id].carDec"></p>
        <h3>支付金额: <span class="red">{{goodsDecList[selected_id].carMoney}}</span> 元</h3>
      </div>
    </group>
  </div>
</template>

<script>
import { Group, Checker, CheckerItem } from "vux";
export default {
  data(){
    return {
      selected_id: null
    };
  },
  /**参数：
   * selectedId      默认选中值与value相互对照(id为购卡档的唯一标识)
   * goodsList       商品列表[]
   * goodsDecList    商品注释列表，{1:{carDec:'100张房卡',carMoney: 100}}
   */
  props: {
    selectedId: {
      //设置一个默认值
      default: function() {
        if (this.goodsList) {
          return this.goodsList[0].id;
        }
      }
    },
    goodsList: {
      required: true
    },
    goodsDecList: {
      required: false
    }
  },
  watch: {
    //新增payCode的watch，监听变更同步到selected_id
    selectedId(val) {
      this.selected_id = val;
    }
  },
  updated() {
    if (this.selected_id)
      this.$emit(this.selected_id, false); //子组件对selected_id修改后向父组件发送事件通知
    else this.selected_id = this.selectedId;
  },
  components: {
    Group,
    Checker,
    CheckerItem
  },
  methods: {}
};
</script>
<style scoped>
#getGoodsType .red {
  color: rgb(247, 93, 93);
}
.goods_box {
  width: 100%;
}
.goods_box h3 {
  font-size: 0.35rem;
}
.goods_box p {
  font-size: 0.25rem;
}
.goods-item {
  width: 45%;
  margin: 2.5%;
  padding: 0.35rem;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  background-color: #fff;
}
.goods-item h3 {
  color: rgb(85, 85, 85);
}
.goods-item p {
  color: rgb(211, 211, 211);
}
.goods-item-selected {
  background: #ffffff url("../../images/xuanzhong_icon.png") no-repeat right
    bottom;
  background-size: 20%;
  border-color: rgb(16, 142, 233);
}
.goods-item-selected h3 {
  color: rgb(0, 133, 231);
}
.goods-item-selected p {
  color: rgb(95, 186, 255);
}
.goods_dec {
  padding-top: 0.3rem;
}
.goods_dec h3 {
  margin-top: 0.2rem;
}
</style>
<style>
#getGoodsType .goods_box .weui-cells {
  margin: 0;
  padding: 0.2rem 0.4rem;
}
#getGoodsType .goods_box .weui-cells:before {
  border: none;
}
#getGoodsType .goods_add {
  font-size: 0.25rem;
  color: rgb(247, 93, 93);
  height: 0.3rem;
}
#getGoodsType .goods_dec p span {
  color: rgb(247, 93, 93);
}
</style>
